<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.input.type" style="width: 100px">
            <el-option label="冲账单号" value="strike_no"></el-option>
            <el-option label="采购单号" value="purchase_no"></el-option>
          </el-select>
          <el-input v-model="form.input.value" placeholder="请输入" class="w-40"></el-input>
        </VGroup>
        <VCascader v-model="form.purchase_user_id" placeholder="采购人员" multiple collapse-tags filterable clearable
          style="min-width: 160px" />
        <VCascader v-model="form.strike_user_id" placeholder="冲账人员" multiple collapse-tags filterable clearable
          style="min-width: 160px" />
        <VSelect v-model="form.status" placeholder="冲账状态" :options="options.status || []" multiple collapse-tags
          filterable clearable style="min-width: 160px" />
        <!-- <VSelect v-model="form.settlement_type" placeholder="结算方式" :options="options.settlement_type || []" multiple
          collapse-tags filterable clearable style="min-width: 160px" /> -->
        <VSelect v-model="form.supplier_name" placeholder="供应商" type="supplierName" allow-create style="min-width: 200px" multiple
          collapse-tags clearable filterable />
        <VGroup>
          <div class="v-group-item">冲账时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/finance/abnormal/strike" type="primary" @click="handleBatch('strike')">批量冲账</VButton>
        <VAudit auth="/purchase/finance/abnormal/audit" field="s_id" url="/v1/purchase/strike/batch-audit"
          :tableRef="tableRef" @success="query" />
        <VExport auth="/purchase/finance/abnormal/export" url="/v1/supplier/supplier-bank/export" :name="baseName"
          :tableRef="tableRef" class="ml-auto" />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" />
    <PurchaseAdd ref="purchaseAddRef" />
    <VLog ref="logRef" />
  </VPage>
</template>
  
<script setup lang="jsx">
import api from './api'
import Add from './components/Add'
import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'
import PurchaseAdd from '@/views/manage/purchase/components/Add'

const baseName = 'strike'
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 获取options
const options = ref({})
Promise.all([
  getOption({ type: baseName }).then(res => res.data),
  getOption({ type: 'payment' }).then(res => res.data),
  Promise.resolve({ test: [{ label: '没有数据', value: 1 }] })
]).then(res => {
  options.value = res.reduce((acc, cur) => (((acc = { ...acc, ...cur }), acc)), {})
})

// 批量操作
const handleBatch = (name) => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const s_ids = selection.map(d => d.s_id)
  const showLoading = () => loadings[name] = true
  const closeLoading = () => loadings[name] = false
  const handle = {
    strike: () => {
      showLoading()
      api.batchStrike({ s_ids }).then(res => {
        ElMessage.success('操作成功')
        query()
      }).finally(closeLoading)
    },
  }
  handle[name]()
}

// 单行操作
const addRef = ref()
const purchaseAddRef = ref()
const handleRow = (name, row, rowIndex) => {
  const { s_id } = row
  const showLoading = () => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = () => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    look: () => {
      addRef?.value.open({ s_id }, true)
    },
    purchaseAdd: () => {
      purchaseAddRef?.value.open(s_id, true)
    },
    log: () => {
      logRef?.value.open({ log_type: baseName, s_id })
    },
  }
  handle[name]()
}

// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 72 },
  showHeaderOverflow: false,
  formConfig: {
    data: {
      strike_type: 1,
      input: { type: 'strike_no', value: '' },
      dateRange: { type: 'strike_time', value: [], range: true },
    }
  },
  columns: [
    { type: 'checkbox', width: 40, fixed: 'left' },
    {
      minWidth: 180, slots: {
        header: () => <div>冲账单号<br />申请冲账时间</div>,
        default: ({ row }) => <div>
          <VText value={row.strike_no} />
          <div>{row.create_time}</div>
        </div>
      }
    },
    {
      minWidth: 220, slots: {
        header: () => <div>供应商<br />结算方式/供应商类型</div>,
        default: ({ row }) => <div>
          <VText value={row.supplier_name} />
          <VText title='供应商类型' value={row.purchase_type_name}></VText>
          <VText title='结算方式' value={row.period_name}></VText>
        </div>
      }
    },
    {
      minWidth: 150, slots: {
        header: () => <div>采购单号</div>,
        default: ({ row }) => <VText value={row.purchase_no} type='link' onClick={() => handleRow('purchaseAdd', row)} />
      }
    },
    {
      minWidth: 150, slots: {
        header: () => <div>异常单号</div>,
        default: ({ row, rowIndex }) => {
          const { abnormal_no } = row
          if (!abnormal_no?.length) return '-'
          const content = () => abnormal_no.map(d => <VText value={d} />)
          return <VMore value={content} line={2} key={rowIndex} />
        }
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>下单数量</div>,
        default: ({ row }) => row.purchase_num
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>收货数量</div>,
        default: ({ row }) => row.deliver_num
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>入库数量</div>,
        default: ({ row }) => row.inbound_num
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>不良品数</div>,
        default: ({ row }) => row.reject_num
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>退货数量</div>,
        default: ({ row }) => row.return_num
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>下单总金额</div>,
        default: ({ row }) => row.total_price_tax
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>入库总金额</div>,
        default: ({ row }) => row.inbound_price
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>退款总金额</div>,
        default: ({ row }) => row.return_price
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>已付总金额</div>,
        default: ({ row }) => row.payment_price
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>冲账金额</div>,
        default: ({ row }) => row.strike_price
      }
    },
    {
      minWidth: 90, slots: {
        header: () => <div>调整金额</div>,
        default: ({ row }) => row.adjustment_price
      }
    },
    {
      minWidth: 180, slots: {
        header: () => <div>采购员<br />下单时间</div>,
        default: ({ row }) => <div>
          <div>{row.purchase_user_name}</div>
          <div>{row.platform_order_time}</div>
        </div>
      }
    },
    {
      minWidth: 230, slots: {
        header: () => <div>入库信息</div>,
        default: ({ row }) => <div>
          <VText title='入库仓' value={row.inbound_warehouse}></VText>
          <VText title='入库时间' value={row.inbound_time}></VText>
        </div>
      }
    },
    {
      minWidth: 170, slots: {
        header: () => <div>审核状态<br />审核人员<br />审核时间</div>,
        default: ({ row }) => <div>
          <div>{row.audit_status_name}</div>
          <div>{row.audit_user}</div>
          <div>{row.audit_time}</div>
        </div>
      }
    },
    {
      minWidth: 150, slots: {
        header: () => <div>审核备注</div>,
        default: ({ row }) => <VText value={row.audit_remark} line={3} />
      }
    },
    {
      title: '操作', width: 100, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          return [<div class='nm flex flex-wrap gap-2'>
            <VButton auth="/purchase/finance/abnormal/detail" link type="primary" onClick={() => handleRow('look', row)}>查看</VButton>
            <VButton auth="/purchase/finance/abnormal/log" link type="primary" onClick={() => handleRow('log', row)}>日志</VButton>
          </div>]
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  